let flag = false;
let delf = false;
let cur = -1;
let size = 18;

function fInc() {
    size += 2;
    $('style').innerHTML = `#content{font-size:${size}px !important}`
}

function fDec() {
    size -= 2;
    $('style').innerHTML = `#content{font-size:${size}px !important}`
}

function show() {
    let spanArr = document.querySelectorAll('#content > div > span');
    for (let i = 0, l = spanArr.length; i < l; i++) {
        spanArr[i].className = 'show';
    }
}

function hide() {
    let spanArr = document.querySelectorAll('#content > div > span');
    for (let i = 0, l = spanArr.length; i < l; i++) {
        spanArr[i].className = '';
    }
}

function del() {
    if (delf == false) {
        $('del').innerHTML = '\uE0E7';
        $('del').style.background = '#f333'
        delf = true;
        setTimeout(() => {
            $('del').innerHTML = '&#57607;';
            $('del').style.background = ''
            delf = false;
        }, 3000)
    } else {
        let para = -(-window.location.search.substr(1)),
            arr = JSON.parse(localStorage.nameArr);
        localStorage.removeItem(arr[para]);
        arr.splice(para, 1);
        localStorage.nameArr = JSON.stringify(arr);
        webBack();

    }
}

function tit(obj) {
    let para = -(-window.location.search.substr(1)),
        arr = JSON.parse(localStorage.nameArr);
    let name = arr[para];
    let ntit = obj.value;
    if (ntit == name) return;
    if (arr.includes(ntit) || ntit == '') {
        obj.style.borderColor = '#f33c';
    }
    else {
        arr[para] = ntit;
        localStorage.nameArr = JSON.stringify(arr);
        localStorage[ntit] = localStorage[name];
        localStorage.removeItem(name);
    }
}

function toggle(obj) {
    let cls = 'show'
    if (hasClass(obj, cls)) {
        removeClass(obj, cls);
    } else {
        addClass(obj, cls);
    }
    cur = -(-obj.id)
}
function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(obj, cls) {
    if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}

function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        obj.className = obj.className.replace(reg, ' ');
    }
}

function load() {
    let para = -(-window.location.search.substr(1)),
        name = JSON.parse(localStorage.nameArr)[para];
    $('title').value = name;
    if (!localStorage[name] || localStorage[name] == '') {
        localStorage[name] = '';
        edit();
        return;
    }
    let text = localStorage[name];
    if (text.search(/\[+/) != -1) {
        text = text.replace(/\[+/g, '<span onclick="toggle(this)">')
        text = text.replace(/\]+/g, "</span>")
        text = text.replace(/\n+/g, "</div><div>")
        text = `<div>${text}</div>`.replace('<div></div>', '');
    }
    else {
        text = '\n' + text;
        text = text.replace(/(\n+\s*)+/g, " \uFFFE ")
        text = text.replace(/([\s+,，：；。！？])/g, "$1\uFFFF")
        let textSplit = text.split('\uFFFF');
        text = '<div>'
        for (let i = 0, l = textSplit.length; i < l; i++) {
            if (textSplit[i] == '\uFFFE ') text += '</div><div>'
            else if (textSplit[i] != ' ' && textSplit[i] != '') text += `<span onclick="toggle(this)">${textSplit[i]}</span>`
        }
        text += "</div>"
        text = text.replace('<div></div>', "")
    }
    $('content').innerHTML = text;
    let spanArr = document.querySelectorAll('#content > div > span');
    for (let i = 0, l = spanArr.length; i < l; i++) {
        spanArr[i].id = i;
    }
    cur = -1;
}

window.onload = load;

function edit() {
    if (flag == false) {
        flag = true;
        let para = -(-window.location.search.substr(1)),
            name = JSON.parse(localStorage.nameArr)[para];
        let text = localStorage[name];
        $('content').innerHTML = `<textarea id="editArea">${text}</textarea>`;
        $('edit').innerHTML = '\uE10B'
        $('toolbar').style.display='none';
    }
    else {
        flag = false;
        $('edit').innerHTML = '&#57604;'
        let para = -(-window.location.search.substr(1)),
            name = JSON.parse(localStorage.nameArr)[para];
        localStorage[name] = $('editArea').value;
        $('toolbar').style.display='';
        load();
    }
}

// document.addEventListener("plusready", () => {
//     plus.key.addEventListener("keydown", (e) => {
//         switch (e.keyCode) {
//             case 24://volumeupbutton
//             case 39:
//             case 40:
//                 if (cur >= 0) { toggle($(cur--)); cur--; }
//                 break;
//             case 25://volumedownbutton    
//             case 37:
//             case 38:
//                 toggle($(++cur))
//                 break;
//             default: break;
//         }
//     });
// }, false);

document.onkeyup=(e)=>{
    switch (e.keyCode) {
        case 81:
            if (cur >= 0) { toggle($(cur--)); cur--; }
            break;
        case 87:
            toggle($(++cur))
            break;
        default: break;
    }
}